import React, { Component } from 'react';
import './order.css'
import Img_2 from '../../images/1.jpg'
import Img_4 from '../../images/8.jpg'
import Img_3 from '../../images/1.svg'

export default class Order extends Component {
    goHomeM = () => {
        this.props.history.push('/homepage')
    }
    goPayM = () => {
        this.props.history.push('/pay')
    }
    goPay_loginM = () => {
        this.props.history.push('/pay_login')
    }

    render() {
        return (
            <div>
                <div className="data-content">
                    <div className="wrap">
                        <div className="main-item-left">
                            <header className="main_header">
                                <div onClick={this.goHomeM.bind(this)}>
                                    <span className="logo_text">
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>我们的生活市场</font>
                                        </font>
                                    </span>
                                </div>
                                <nav>
                                    <ul className="breadcrumb">
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>信息</font>
                                                </font>
                                            </span>
                                            <span className="icon-svg">→</span>
                                        </li>
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>运输</font>
                                                </font>
                                            </span>
                                            <span className="icon-svg">→</span>
                                        </li>
                                        <li className="breadcrumb_item breadcrumb_completed">
                                            <span className="breadcrumb_text">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>付款</font>
                                                </font>
                                            </span>
                                        </li>
                                    </ul>
                                </nav>
                            </header>
                            <div className="step_sections">
                                <div className="section">
                                    <div className="content-box">
                                        <div className="content-box_row">
                                            <div className="review-block">
                                                <div className="review-block_inner">
                                                    <span className="review-block_label">联系</span>
                                                    <span className="review-block_content">2508178158@qq.com</span>
                                                    <span className="review-block_change">
                                                        <span>更改</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="review-block row">
                                                <div className="review-block_inner">
                                                    <span className="review-block_label">运送到</span>
                                                    <span className="review-block_content">湖北武汉武汉，4000000湖北，中国</span>
                                                    <span className="review-block_change">
                                                        <span>更改</span>
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="review-block row">
                                                <div className="review-block_inner">
                                                    <span className="review-block_label">方法</span>
                                                    <span className="review-block_content">邮政（12-30天）· $ 8.90</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="contact-information"
                                    style={{ marginTop: '3em' }}
                                >
                                    <div className="section_header"
                                        style={{ marginBottom: '1.5em' }}
                                    >
                                        <div className="section_title">付款</div>
                                        {/* <div>所有交易都是安全和加密的。</div> */}
                                    </div>
                                    <div className="section_content">
                                        <div className="content-box">
                                            <div className="content-box_row">
                                                <img src={Img_3} alt="" />
                                            </div>
                                            <div className="content-box_row box-row">
                                                <div className="blank-slate">
                                                    <div className="blank-slate_icon icon-offsite">
                                                        <img src={Img_4} alt=""/>
                                                    </div>
                                                    <p className="blank-slate_shown">
                                                        <font style={{ verticalAlign: 'inherit' }}>
                                                            <font style={{ verticalAlign: 'inherit' }}>点击“完成订单”后，您将被重定向到PayPal以安全地完成购买。</font>
                                                        </font>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="contact-information"
                                    style={{ marginTop: '3em' }}
                                >
                                    <div className="section_header"
                                        style={{ marginBottom: '1.5em' }}
                                    >
                                        <div className="section_title">账单地址</div>
                                        {/* <div>所有交易都是安全和加密的。</div> */}
                                    </div>
                                    <div className="section_content">
                                        <div className="content-box">
                                            <div className="content-box_row box_row">和邮件地址一样</div>
                                            <div className="content-box_row box-row box_row">使用其他帐单地址</div>
                                        </div>
                                    </div>
                                </div>
                                <div className="step__footer">
                                    <button type="submit" className="step__footer__continue-btn btn"
                                    onClick={this.goPay_loginM.bind(this)}
                                    >
                                        <span>
                                            <font style={{ verticalAlign: 'inherit' }}>
                                                <font style={{ verticalAlign: 'inherit' }}>完成订单</font>
                                            </font>
                                        </span>
                                    </button>
                                    <div className="step_back"
                                        onClick={this.goPayM.bind(this)}
                                    >←返回运输</div>
                                </div>
                                <footer className="main__footer" role="contentinfo">
                                    <p className="copyright-text ">
                                        <font style={{ verticalAlign: 'inherit' }}>
                                            <font style={{ verticalAlign: 'inherit' }}>版权所有ourlifemarket</font>
                                        </font>
                                    </p>
                                </footer>
                            </div>
                        </div>
                        <div className="main-item-right">
                            <div className="sidebar_content">
                                <div className="product-list">
                                    <div className="product-table">
                                        <span className="product_image">
                                            <div className="product-thumbnail">
                                                <img src={Img_2} alt="" />
                                            </div>
                                            <span className="product-thumbnail__quantity">
                                                <font style={{ verticalAlign: 'inherit' }}>
                                                    <font style={{ verticalAlign: 'inherit' }}>1个</font>
                                                </font>
                                            </span>
                                        </span>
                                        <span className="product_description">
                                            <div className="product_description_name">IT卫衣3D印花连帽外套</div>
                                            <div className="product_description_variant">小号</div>
                                        </span>
                                        <span className="product_price">$ 45.99</span>
                                    </div>
                                </div>
                                <div className="total-lines">
                                    <div className="total-line-one">
                                        <span className="line-subtotal">
                                            <span className="total-line_name">小计</span>
                                            <span className="total-line_price">$ 45.99</span>
                                        </span>
                                    </div>
                                    <div className="total-line-four">
                                        <span className="line-subtotal">
                                            <span className="total-line_name">运输</span>
                                            <span className="total-line_price">$ 8.90</span>
                                        </span>
                                    </div>
                                    <div className="total-line-five">
                                        <span className="line-subtotal">
                                            <span className="total-line_name">税收</span>
                                            <span className="total-line_price">$ 23.45</span>
                                        </span>
                                    </div>
                                    <div className="total-line-three">
                                        <span className="line-subtotal">
                                            <span className="total_name">总</span>
                                            <span className="total_price">$ 45.99</span>
                                            <span className="lines">美元</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}